import { any, bool, func } from 'prop-types'
import { useEffect, useState } from 'react'
import { formatSeconds } from '../util/Utils'
import'./style.less'


function Process(props){
    let { total, current, onClick, style, showTime, disable } = props
    let [percentage, setPercentage] = useState('0%')
    let [innerTotal, setTotal] = useState(0)
    let [innerCurrent, setCurrent] = useState(0)
    let [move, setMove] = useState(false)
    let [flag, setflag] = useState('0%')
    useEffect(()=>{
        setData()
        console.log('process-16',move)
        // console.log(total)
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])

    useEffect(()=>{
        // console.log(innerCurrent,innerTotal)
        setPercentage(`${(innerCurrent/innerTotal)*100}%`)
        setflag(`${(innerCurrent/innerTotal)*100 - 0.5}%`)
    },[innerCurrent, innerTotal])
    useEffect(() => {
        setCurrent(current)
        setTotal(total)
    }, [total,current])

    function setData(){
        setTotal(total)
        setCurrent(current)
    }

    return <div className='process'>
                {showTime &&<div className='text' style={style}>
                    {`${formatSeconds(innerCurrent) ||'00:00:00'} / ${formatSeconds(total) ||'00:00:00'}`}
                </div>}
                <div className="total"
                        onMouseDown={(e)=>{
                            if(!disable){
                                let x = e.clientX - e.currentTarget.getBoundingClientRect().left
                                let width = e.currentTarget.clientWidth
                                let per = (x/width)
                                if(per < 0) per = 0
                                if(per > 1) per = 1
                                setCurrent(total*per)
                                setMove(true)
                                if(onClick)
                                    onClick(total*per, e)
                            }
                        }}
                        onMouseUp={()=>{
                            // if(!disable)
                                setMove(false)
                        }}
                        // onMouseMove={(e)=>{
                        //     if(move){
                        //         let x = e.clientX - e.currentTarget.getBoundingClientRect().left
                        //         let width = e.currentTarget.clientWidth
                        //         let per = (x/width)
                        //         if(per < 0) per = 0
                        //         if(per > 1) per = 1
                        //         setCurrent(total*per)
                        //     }
                        // }}
                    >
                <div className="current" onClick={()=>false} style={{width:percentage}}></div>
                <div className="flag" 
                    style={{left:flag}}
                    // onMouseDown={(e)=>{

                    // }}    
                    // onMouseMove={(e)=>{
                    //     console.log(e)
                    // }}
                ></div>
            </div>

        </div>
}
Process.propTypes = {
    total:any,
    current:any,
    onClick:func,
    showTime:bool,
    disable:bool
}
Process.defaultProps = {
    total: 0,
    current: 0,
    showTime:true,
    disable:false
}
export default Process